<template>
	<div style="height: 100%;width: 100%;">
		<div style="background: #fff;border-radius: 16px;margin-bottom: 20px;padding: 20px 30px;" class="point width100p">
			<div style="display: flex;align-items: center;" class="mb20">
				<span class="font16 color555">{{dataList.outletName}}</span>
				<span class="font13 color888 ml10">{{dataList.latestTime || '暂无最新时间'}}</span>

				<!-- <img v-if="dataList.onlineStatus == 'ONLINE'" src="@/assets/sIcon30.png"
					style="width: 15px;height: 15px;margin-left: 10px;" />
				<img v-else-if="dataList.onlineStatus == 'OFFLINE'" src="@/assets/sIcon32.png"
					style="width: 15px;height: 15px;margin-left: 10px;" /> -->
			</div>

			<div style="font-size: 12px;color: #999;margin-bottom: 20px;">污染物</div>

			<div style="padding-bottom: 10px;white-space: nowrap;overflow-x: auto;">
				<div v-for="(item1,index1) in dataList.pollutionList" class="mr20"
					style="background: #DCEDFF;border-radius: 16px;padding: 20px;width: 288px;display: inline-block;">
					<div
						style="width:8px;height: 8px;background: #472FDF;border-radius: 50%;display: inline-block;vertical-align: top;margin: 6px 5px 0px;">
					</div>
					<div style="display: inline-block;vertical-align: top;">
						<div style="display: flex;align-items: center;margin-bottom: 10px">
							<span class="font16">{{item1.pollutionName}}</span>
						</div>

						<div style="margin-bottom: 30px">
							<span style="font-size: 24px;color: #1C3451;font-weight: bold;">{{item1.actualAmount}}</span>
							<span style="color: #879FBB;font-size: 13px;">{{item1.unitValue}}</span>
						</div>


						<div class="displayFlex mb20">
							<div style="width: 40px;line-height: 20px;background: #B9D1F1;border-radius: 10px;"
								class="textCenter font13">标杆</div>

							<div class="ml10 displayFlex">
								<span class="mr5"
									style="font-size: 15px;font-weight: bold;color: #1C3451;">{{item1.bgAmount || 0}}</span>
								<span style="color: #879FBB;" class="font13">{{item1.unitValue}}</span>
							</div>
						</div>

						<div class="displayFlex">
							<div style="width: 40px;line-height: 20px;background: #B9D1F1;border-radius: 10px;"
								class="textCenter font13">折算</div>

							<div class="ml10 displayFlex">
								<span class="mr5"
									style="font-size: 15px;font-weight: bold;color: #1C3451;">{{item1.zsAmount || 0}}</span>
								<span style="color: #879FBB;" class="font13">{{item1.unitValue}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="displayFlexBet mb20">
			<div style="padding: 40px 30px;background: #472FDF;border-radius: 24px;width: 308px;height: 417px;">
				<div>
					<span style="color: #F9E429;">|</span>
					<span class="colorfff ml10 font15">时段达标统计</span>
				</div>

				<div class="displayFlex ml10 mt50">
					<div style="width: 56px;line-height: 46px;background: #FFFFFF;border-radius: 12px;color: #472FDF;"
						class="textCenter font16">Month</div>
					<div class="ml5">
						<div style="color: #F9E429;" class="font16">30天达标</div>
						<div style="color: #fff;" class="font20">{{dataList2.monthQPercent}}%</div>
					</div>
				</div>

				<div class="displayFlex ml10 mt50">
					<div style="width: 56px;line-height: 46px;background: #FFFFFF;border-radius: 12px;color: #472FDF;"
						class="textCenter font16">Year</div>
					<div class="ml5">
						<div style="color: #F9E429;" class="font16">全年达标</div>
						<div style="color: #fff;" class="font20">{{dataList2.yearQPercent}}%</div>
					</div>
				</div>
			</div>

			<div style="background: #E8EAEF;width: calc(100% - 328px);border-radius: 24px;height: 417px;" class="pad20">
				<div class="bgfff pad20" style="border-radius: 12px;position: relative;"
					v-if="dataList2.warningList.length">
					<div style="color: #222;" class="font15 mb10">30天时段异常（8时段）</div>
					<div class="color888 font15"
						style="line-height: 50px;border-bottom: 1px solid#E8EAEF;overflow-x: auto;white-space: nowrap;">
						<div class="mr30 point" v-for="(item,index) in dataList2.warningList" :key="index"
							style="display: inline-block;" :class="[dataList2Index == index?'selected1':'']"
							@click="dataList2Index = index,getGasPollutionMinuteList()">
							{{item.pollutionName}}（{{item.dateStr}}）
						</div>
					</div>

					<div class="font15 mt20" style="color: #222;">{{dataList2[dataList2Index.pollutionName]}}</div>
					<div id="chart3" style="height: 200px;width: clac(100% - 50px);margin-left: 50px;" v-loading="loading1">
					</div>

					<div class="textCenter font13"
						style="width: 116px;line-height: 28px;background: #FAE6E6;border-radius: 14px 0px 0px 14px;color: #EF5350;position: absolute;right: 0;top: 120px;">
						全部异常时段
					</div>
				</div>
				<el-empty v-else />
			</div>
		</div>

		<div style="background: #fff;border-radius: 16px;padding: 30px;">
			<div class="displayFlexBet" style="margin-bottom: 10px;">
				<div class="displayFlex">
					<div @click="timeType = '分钟',formLineData()" :class="[timeType == '分钟'?'colorSelected':'color888']"
						class="point">
						分钟数据
					</div>
					<div style="margin: 0 20px;color: #EDECF1;">|</div>
					<div @click="timeType = '小时',formLineData()" :class="[timeType == '小时'?'colorSelected':'color888']"
						class="point">
						小时数据
					</div>
				</div>

				<div v-if="timeType == '小时'">
					<span style="margin:0 10px;color: #999;font-size: 12px;">日期：</span>
					<el-date-picker v-model="timeDate" type="date" placeholder="日期" start-placeholder="日期"
						end-placeholder="日期" size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
						style="border-radius: 20px;" :clearable="false" @change="formLineData()">
					</el-date-picker>
				</div>

				<div v-if="timeType == '分钟'">
					<span style="margin:0 10px;color: #999;font-size: 12px;">日期：</span>
					<el-date-picker v-model="timeDate" type="date" placeholder="开始日期" start-placeholder="开始日期"
						end-placeholder="开始日期" size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
						style="border-radius: 20px;" :clearable="false" @change="formLineData()">
					</el-date-picker>

					<span style="margin:0 10px;color: #999;font-size: 12px;">小时：</span>
					<!-- <el-time-picker v-model="timeValue1" placeholder="开始时间" value-format="HH" format="HH小时"
						@change="formLineData()">
					</el-time-picker> -->
					<el-select v-model="timeValue1" placeholder="开始时间" @change="formLineData()">
						<el-option v-for="item in 24" :key="item" :label="item+'小时'" :value="item<10?'0'+item:item">
						</el-option>
					</el-select>

					<!-- <el-button size="small" @click="formLineData()" class="ml10" type='primary'>查询</el-button> -->
				</div>
				<div></div>
			</div>


			<div v-for="(item,index) in pollutionList" v-loading="loading">
				<div style="font-size: 14px;color: #333;">
					{{item.pollutionName}}产生量（{{item.unitCode}}）
				</div>
				<div style="width: 100%;height: 300px;" :key="index" :id="'lineChart'+index" class="mb20"></div>
			</div>

		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import moment from 'moment'

	let that
	export default {
		data() {
			return {
				loading: false,
				loading1: false,
				dataList: {},
				pollutionList: [],
				params: {
					outletId: '',
					startTime: '',
					endTime: ''
				},
				timeType: '分钟',
				selectData: '',
				timeDate: moment().format('YYYY-MM-DD'),
				timeValue1: moment().format('HH'),
				dataList2: {
					warningList: []
				},
				dataList2Index: 0,
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.outletId = that.getQueryString("outletId")
			that.getGasOnlineLatestMonitorByOutletId()
			that.countGasMaterialUse()
			that.countYearHourStatistics()

			that.formLineData()
		},

		methods: {
			// gotoPage() {
			// 	that.$router.push("/wasteGas/onlineSurveyError")
			// },

			countYearHourStatistics() {
				that.ajax({
					url: 'gasOutlet/onlineMonitor/countYearHourStatistics',
					data: {
						outletId: that.params.outletId
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(res) {
						that.dataList2 = res.data
						that.getGasPollutionMinuteList()
					},
				})
			},

			getGasPollutionMinuteList() {
				that.loading1 = true
				that.ajax({
					url: 'gasOutlet/getGasPollutionMinuteList',
					contentType: 'application/json',
					data: JSON.stringify({
						outletId: that.params.outletId,
						divisorCode: that.dataList2.warningList[that.dataList2Index].divisorCode,
						startTime: that.dataList2.warningList[that.dataList2Index].startTime,
						endTime: that.dataList2.warningList[that.dataList2Index].endTime,
					}),
					success: function(result) {
						that.chartData1 = result.data
						let xAxisData = []
						let seriesData = []
						for (let item of result.data) {
							xAxisData.push(item.createTime.split(" ")[1])
							seriesData.push(item.amount)
						}
						that.formcategory("chart3", xAxisData, seriesData)
						that.loading1 = false
					},
				})
			},

			formcategory(charyId, xAxisData, seriesData) {
				var chartDom = document.getElementById(charyId);
				var myChart = echarts.init(chartDom);
				var option;
				let selectData = that.dataList2.warningList[that.dataList2Index]

				option = {
					grid: {
						top: "12%",
						bottom: "10%",
						left: "5%"
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: xAxisData,
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false // 不显示坐标轴刻度线
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						},
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: false,
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: ["#FAFBFC"],
							},
						},
						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: "rgba(215, 215, 215, 1)",
							},
							// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						},
					},
					series: [{
						data: seriesData,
						type: 'line',
						lineStyle: {
							color: '#FF355A', // 折线颜色
							width: 1, // 折线宽度
						},
						label: {
							show: true,
							position: 'top',
							formatter: function(data) {
								if ('' + selectData.maxWarningHourLimit) {
									if (selectData.maxWarningHourLimit < data.value && selectData
										.hourLimitConcentration > data.value) {
										return '{a|' + data.value + '}'
									}
								}
								if ('' + selectData.hourLimitConcentration) {
									if (selectData.hourLimitConcentration <= data.value) {
										return '{b|' + data.value + '}'
									}
								}
							},
							rich: {
								'a': {
									color: '#ffc200'
								},
								'b': {
									color: '#EE6666'
								}
							}
						},
						itemStyle: {
							color: (params) => {
								//return '#EE6666'
								/*if ('' + selectData.maxWarningHourLimit) {
									if (selectData.maxWarningHourLimit < params.data && selectData
										.hourLimitConcentration > params.data) {
										return '#ffc200'
									}
								}
								if ('' + selectData.hourLimitConcentration) {
									if (selectData.hourLimitConcentration <= params.data) {
										return '#EE6666'
									}
								}*/
							}
						}
					}]
				};

				option && myChart.setOption(option);

			},

			countGasMaterialUse() {
				that.ajax({
					url: 'oneMap/getProductQtyData',
					data: {},
					contentType: 'application/x-www-form-urlencoded',
					success: function(res) {

						if (!res.data) return false

						let xAxisData = []
						let seriesData = []
						for (let item of res.data.monthList) {
							xAxisData.push(item.monthStr)
							seriesData.push(item.qty)
						}

						const chartInstance = echarts.init(document.getElementById('chart2'));
						const option = {
							tooltip: {
								trigger: 'axis'
							},
							xAxis: {
								type: 'category',
								data: xAxisData,
								axisLabel: {
									fontSize: 13 //设置坐标轴文本标签的字体大小
								},
								axisLine: { //坐标轴轴线
									show: false,
									lineStyle: {
										color: '#555' // 设置为红色
									}
								},
								axisTick: { //坐标轴刻度
									show: false
								}
							},
							grid: {
								left: 0, // 左侧内边距
								right: 20, // 右侧内边距
								top: 20, // 顶部内边距
								bottom: 20 // 底部内边距
							},
							yAxis: {
								type: 'value',
								splitLine: { //坐标轴在grid区域中的分割线
									show: true
								},
								axisLabel: { //坐标轴刻度标签
									show: false
								},
							},
							series: [{
								data: seriesData,
								type: 'line',
								smooth: false,
								symbol: "none",
								areaStyle: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#E5E6F6' // 渐变起始颜色
									}, {
										offset: 1,
										color: '#E5E6F6' // 渐变结束颜色
									}])
								},
								lineStyle: {
									color: '#5054C2', // 折线颜色
									width: 1, // 折线宽度
								}

							}]
						};
						chartInstance.setOption(option);
					}
				});
			},

			async formLineData() {
				//that.loading = true

				function getGasActualOnlineMonitorDivisorList() {
					return new Promise((resolve, reject) => {
						let api
						if (that.timeType == "天") {
							let thisTimeDate = moment(that.timeDate).format('YYYY-MM')
							let maxDay = '' + moment(that.timeDate, "YYYY-MM").daysInMonth();

							that.params.startTime = thisTimeDate + "-01 00:00:00"
							that.params.endTime = thisTimeDate + "-" + maxDay + " 23:59:59"

							api = '/gasOutlet/getGasDayOnlineMonitorDivisorList'
						} else if (that.timeType == "小时") {
							that.params.startTime = that.timeDate + " " + "00:00:00"
							that.params.endTime = that.timeDate + " " + "23:59:59"

							api = '/gasOutlet/getGasHourOnlineMonitorDivisorList'
						} else {
							that.params.startTime = that.timeDate + " " + that.timeValue1 + ":00:00"
							that.params.endTime = that.timeDate + " " + that.timeValue1 + ":59:59"

							api = 'gasOutlet/getGasMinuteOnlineMonitorDivisorList'
						}
						that.ajax({
							url: api,
							data: JSON.stringify(that.params),
							contentType: 'application/json',
							success: function(result) {
								if (result.data) {
									resolve(result.data)
								}
							},
						}, "加载中...")
					})
				}

				let dataList = await getGasActualOnlineMonitorDivisorList()
				that.pollutionList = dataList.pollutionList

				setTimeout(function() {
					for (let key in dataList.pollutionList) {
						let chartDom = document.getElementById('lineChart' + key);

						let myChart = echarts.init(chartDom);
						let option;
						let pollution = dataList.pollutionList[key]
						let pieces = []
						pollution.maxWarningHourLimit = pollution.maxWarningHourLimit || 0
						pollution.hourLimitConcentration = pollution.hourLimitConcentration || 0
						//if (pollution.maxWarningHourLimit && pollution.hourLimitConcentration) {
						pieces = [{
								lt: pollution.maxWarningHourLimit,
								color: '#78A355',
							},
							{
								gte: pollution.maxWarningHourLimit,
								lte: pollution.hourLimitConcentration,
								color: "yellow",
							},
							{
								gt: pollution.hourLimitConcentration,
								color: "red",
							}
						]
						// } else if (pollution.maxWarningHourLimit) {
						// 	pieces = [{
						// 		lt: pollution.maxWarningHourLimit,
						// 		color: '#78A355',
						// 	}]
						// } else if (pollution.hourLimitConcentration) {
						// 	pieces = [{
						// 		gt: pollution.hourLimitConcentration,
						// 		color: "red",
						// 	}]
						// }

						console.log(pieces)
						let series = [{
							name: dataList.pollutionList[key].pollutionName,
							type: 'line',
							//color: '#' + Math.floor(Math.random() * 16777215).toString(16),
							color: '#3A3EF4',
							showSymbol: false,
							data: [],
							markPoint: {
								data: [{
									type: 'max',
									name: 'Max'
								}]
							},
							markLine: {
								label: {
									show: true,
									formatter: function(params) {
										return params.name + "：" + params.value
									}
								},
								data: []
							}
						}]

						if (pollution.maxWarningHourLimit) {
							series[0].markLine.data.push({
								name: '预警值',
								yAxis: pollution.maxWarningHourLimit
							})
						}

						if (pollution.hourLimitConcentration) {
							series[0].markLine.data.push({
								name: '限值',
								yAxis: pollution.hourLimitConcentration
							})
						}

						//console.log(pollution.hourLimitConcentration, pollution.dayLimitConcentration)

						for (let item of dataList.dataList) {
							series[0].data.push({
								//name: pollution.pollutionName,
								value: [
									item.createTime,
									item.pollutionList[key].couAmount || 0,
								]
							})
						}

						option = {
							grid: {
								show: false,
								top: '15%',
								right: '80px',
								bottom: '10%',
								left: '40px'
							},
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'cross'
								},
								backgroundColor: 'rgba(255, 255, 255, 0.8)',
								formatter: function(params) {
									let str = ''
									let thisDataList = dataList.dataList
									str += thisDataList[params[0].dataIndex].createTime + '<br/>'
									for (let key1 in params) {
										let item = params[key1]

										str += thisDataList[item.dataIndex].pollutionList[key]
											.pollutionName + "："
										str += thisDataList[item.dataIndex].pollutionList[key]
											.couAmount || 0 +
											"（实测）"
										// str += thisDataList[item.dataIndex].pollutionList[key]
										// 	.zsAmount || 0 +
										// 	"（折算）"
										str += '<br/>'

										for (let item2 of thisDataList[item.dataIndex].regularList) {
											str += item2.pollutionName + "："
											str += (item2.couAmount || 0) + item2.unitValue
											str += '<br/>'
										}
										str += '<br/>'

									}
									return (str);
								},
							},
							xAxis: {
								type: 'category',
								splitLine: {
									show: false,
								},
								axisLine: {
									show: true,
									lineStyle: {
										color: '#fff',
										width: 2
									}
								},
								axisLabel: {
									show: true,
									textStyle: {
										color: '#333',
										fontSize: 14,
										fontWeight: 'bold'
									},
									formatter: function(value) {
										if (that.timeType == "天") return moment(value).format('DD') + "日";
										else if (that.timeType == "小时") return moment(value).format('HH:mm');
										else return moment(value).format('HH:mm:ss');
									}
								},
							},
							yAxis: {
								type: 'value',
								splitLine: {
									show: false,
								},
								axisTick: {
									show: false
								},
								axisLine: {
									show: true,
									lineStyle: {
										color: '#fff',
										width: 2
									}
								},
								axisLabel: {
									show: true,
									textStyle: {
										color: '#D7D7D7',
										fontSize: 14,
										fontWeight: 'bold'
									}
								},
							},
							series: series
						};

						if (pieces.length) option.visualMap = [{
							show: false,
							pieces: pieces
						}]

						option && myChart.setOption(option, true);

						that.loading = false
					}
				}, 1000)
			},

			getGasOnlineLatestMonitorByOutletId: function(value) {
				that.ajax({
					url: '/gasOutlet/getGasOnlineLatestMonitorByOutletId',
					dataType: 'json',
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: function(result) {
						that.dataList = result.data
					}
				})
			},

			// 查看是否为空
			isNull(value) {
				if (value) {
					return false;
				}
				return true;
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.colorSelected {
		color: #3A3EF4;
		font-weight: bold;
	}

	.selected1 {
		color: #3A3EF4;
		border-bottom: 1px solid#3A3EF4;
	}
</style>